<template>

    <div class="register-container">
        <div class="register-header-box">
            <!-- <div class="application-back"> -->
            <img src="@/assets/image/bak.png" alt="logo" class="Back-img" @click="goBack" />
            <!-- </div> -->
            <div class="register-header">
                <span class="title">账号申请</span>
            </div>
        </div>

        <div class="register-desc">
            请您填写以下信息，方便管理员给您开通考古标签使用账号（预计1-2工作日）
        </div>
        <input class="register-input" type="text" placeholder="真实名字" v-model="form.name" />
        <input class="register-input" type="text" placeholder="工作单位" v-model="form.company" />
        <input class="register-input" type="password" placeholder="密码" v-model="form.password" />
        <input class="register-input" type="password" placeholder="确认密码" v-model="form.confirmPassword" />
        <div class="register-tip">
            密码长度8~32位,须包含数字、字母、符号至少2种以上元素
        </div>
        <button class="register-btn" @click="submit">提交并完善个人信息</button>
        <div class="register-agree">
            <input type="checkbox" v-model="form.agree" id="agree" />
            <label for="agree">同意《用户注册协议及隐私政策》</label>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const form = ref({
    name: '',
    company: '',
    password: '',
    confirmPassword: '',
    agree: false
})
const submit = () => {
    // 提交逻辑
    console.log('form', form.value)
    router.push('/applicationTwo')
}
const goBack = () => {
    router.back()
}
</script>

<style scoped>
.register-container {
    width: 370px;
    margin: 0 auto;
    /* background: #fff; */
    border-radius: 12px;
    /* padding: 24px 16px 0 16px; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
    /* min-height: 600px; */
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.application-back {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 12px;
}

.register-header-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.register-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 12px;
}

.Back-img {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 8px;
    cursor: pointer;
}

.back-btn {
    position: absolute;
    left: 0;
    cursor: pointer;
    font-size: 18px;
    color: #333;
}

.title {
    font-size: 18px;
    font-weight: bold;
}

.register-desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 18px;
    text-align: center;
}

.register-input {
    width: 100%;
    height: 38px;
    margin-bottom: 14px;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 15px;
    outline: none;
    background: #fafbfc;
    box-sizing: border-box;
}

.register-input:focus {
    border-color: #ff7f50;
}

.register-tip {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 18px;
    margin-left: 4px;
}

.register-btn {
    width: 100%;
    height: 40px;
    background: #ff7f50;
    border: none;
    color: #fff;
    border-radius: 20px;
    margin-bottom: 18px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.register-btn:active {
    background: #ff5a1f;
}

.register-agree {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #bbb;
    margin-bottom: 10px;
    margin-top: auto;
    padding-bottom: 20px;
}

.register-agree input[type="checkbox"] {
    margin-right: 6px;
}

.register-agree label {
    cursor: pointer;
}
</style>
